﻿<html>
<head>
    <title>Layout</title>
    <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    p{margin:5px;}
    .settings {background-image:url(extjs/examples/shared/icons/fam/folder_wrench.png);}
    .nav {background-image:url(extjs/examples/shared/icons/fam/folder_go.png);}
    .info {background-image:url(extjs/examples/shared/icons/fam/information.png);}
    .pico {text-indent:18px;background:url(extjs/examples/shared/icons/fam/grid.png) no-repeat;cursor:pointer}
	.header {font-size:14px;height:28px;line-height:28px;text-indent:8px;}
    </style>
    <script src="extjs/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
		Ext.onReady(function(){
			var store=Ext.create('Ext.data.TreeStore',{
				proxy:{
					type:'ajax',
					url:'WebService.ashx?action=tree'
				},
				root:{
					title:'Ext.Tree',
					id:0,
					expanded:true
				},
				folderSort:true,
				sorters:[{
					property:'text',
					direction:'asc'
				}]
			});
			var tree=Ext.create('Ext.tree.Panel',{
				store:store,
				viewConfig:{
					plugins:{ptype:'treeviewdragdrop'}
				},
				autoScroll:true,
				height:360,
				rootVisible:false,
				border:false
			});
		
			Ext.create('Ext.Viewport',{
				layout:'border',
				renderTo:Ext.getBody(),
				items:[{
					region:'north',	
					id:'north',
					height:30,
					margin:'1',
					bodyStyle:{
						background:'#DFE8F6'
					},
					html:'当前位置：<i id=current></i>',
					cls:'header'
				},{
					region:'west',
					id:'west',
					title:'Menu Panel',
					width:200,
					margins:'0 5 0 2',
					iconCls:'pico',
					items:[tree]
				},{
					region:'south',
					id:'south',
					height:30,
					margin:'1',
					bodyStyle:{
						background:'#DFE8F6'
					}
				},{
					region:'center',
					id:'center',
					xtype:'tabpanel',
					activeTab:0,
					margins:'0 2 0 0',
					items:[{
						title:'About Site',
					}]
				}]
			});
		});
    </script>
</head>
<body>

</body>
</html>
